<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人介绍页</title>
    <!-- Bootstrap CSS -->
    <link href="./node_modules\bootstrap\dist\css\bootstrap.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="./css/style.css">
</head>

<body data-bs-spy="scroll" data-bs-target="#navbar">
    <!-- 导航栏 -->
    <nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">我的个人网站</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#home">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about">关于我</a></li>
                    <li class="nav-item"><a class="nav-link" href="#skills">技能</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">联系方式</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div id="home" class="carousel slide mt-5" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#home" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#home" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#home" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://n.sinaimg.cn/sinakd20109/214/w2048h1366/20220620/e9fe-9ed85bf87cfb0347f59742731e1f3d8c.jpg"
                    class="d-block w-100" alt="个人照片1">
                <div class="carousel-caption">
                    <h2>欢迎来到我的个人网站</h2>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://pic1.zhimg.com/v2-50b467d546ef7a6326182d6b29ff8998_b.jpg" class="d-block w-100"
                    alt="个人照片2">
                <div class="carousel-caption">
                    <h2>我的技能与经验</h2>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://www.chwin-tech.com/static/modules/cms/images/contact-img1.png" class="d-block w-100"
                    alt="个人照片3">
                <div class="carousel-caption">
                    <h2>联系方式</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- 关于我 -->
    <section id="about" class="container my-5">
        <h2 class="text-center mb-4">关于我</h2>
        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <img src="https://c-ssl.dtstatic.com/uploads/blog/202304/29/20230429194620_cd903.thumb.400_0.jpg"
                            class="rounded-circle img-thumbnail mb-3" alt="个人头像">
                        <h3 class="card-title">个人基本信息</h3>
                        <p class="card-text">你好！我是孙文正，一名燃尽的软件开发工程师。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title">自我介绍</h2>
<br/>
                        <p class="card-text"> 1、熟练使用 Spring、SpringMVC、Mybatis，Mybatis-plus 框架开发，SpringBoot 整合开发。 </p>
                        <p class="card-text"> 2、熟练 MySQL、SQL server，人大金仓数据库，可以熟练掌握数据库操作,可进行一定的数据库优化。 </p>
                        <p class="card-text"> 3、熟练使用 Vue，Vuex，AVue 、Element-UI、Echarts、AJ-Report 等前端框架技术。 </p>
                        <p class="card-text"> 4、熟练可使用Nginx、Linux命令进行项目的部署与维护。 5、熟练使用JAVA、能解决项目中出现的问题。</p>
                        <p class="card-text"> 6、熟悉redis等非关系型数据库的使用开发。 7、了解JVM,和垃圾回收机制。</p>
                        <p class="card-text"> 8、熟练使用 Xshell、Xftp、IDEA、VSCODE、等开发部署软件。</p>
                        <p class="card-text"> 9、掌握svn、git等代码管理工具进行团队协作开发。 </p>
                        <p class="card-text"> 10、具有良好的表达、沟通、学习以及问题分析能力、有高度的责任心、抗压能力。</p>
<br/>
                        <a href="#" class="btn btn-primary">下载简历</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技能 -->
    <section id="skills" class="container my-5">
        <h2 class="text-center mb-4">技能</h2>
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">技术技能</h3>
                        <div class="mb-3">
                            <label class="form-label">HTML/CSS</label>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 90%">90%</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">JavaScript</label>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 85%">85%</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Bootstrap</label>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 95%">95%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">软技能</h3>
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                团队协作
                                <span class="badge bg-primary rounded-pill">9</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                沟通能力
                                <span class="badge bg-primary rounded-pill">8</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                问题解决
                                <span class="badge bg-primary rounded-pill">9</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                时间管理
                                <span class="badge bg-primary rounded-pill">7</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="container my-5">
        <h2 class="text-center mb-4">联系方式</h2>
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="card-title">联系信息</h3>
                        <ul class="list-unstyled">
                            <li class="mb-2"><strong>邮箱:</strong> example@example.com</li>
                            <li class="mb-2"><strong>电话:</strong> 123-456-7890</li>
                            <li class="mb-2"><strong>地址:</strong> 某省某市某区</li>
                        </ul>
                        <div class="d-grid gap-2">
                            <a href="#" class="btn btn-outline-primary">发送邮件</a>
                            <a href="#" class="btn btn-outline-secondary">添加微信</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="card-title">社交媒体</h3>
                        <div class="d-flex justify-content-center gap-3 mb-3">
                            <a href="#" class="btn btn-outline-dark"><i class="bi bi-github"></i></a>
                            <a href="#" class="btn btn-outline-primary"><i class="bi bi-linkedin"></i></a>
                            <a href="#" class="btn btn-outline-danger"><i class="bi bi-instagram"></i></a>
                        </div>
                        <form>
                            <div class="mb-3">
                                <label for="visitor-name" class="form-label">您的姓名</label>
                                <input type="text" class="form-control" id="visitor-name" placeholder="请输入您的姓名">
                            </div>
                            <div class="mb-3">
                                <label for="visitor-message" class="form-label">留言</label>
                                <textarea class="form-control" id="visitor-message" rows="3"
                                    placeholder="请输入您的留言"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">提交留言</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white text-center py-4 mt-5">
        <div class="container">
            <p class="mb-0">© 2023 我的个人网站. 保留所有权利.</p>
        </div>
    </footer>

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href=".\node_modules\bootstrap-icons\font\bootstrap-icons.css">
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="./node_modules\bootstrap\dist\js\bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script>
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>

</html>